<template>
  <div class="pd30 produceFactory bgfff">
    <div class="panelWrap">
      <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20 ">
        <div>电梯档案Excel导入</div>
        <!-- <el-button class="addBtn fw defaultbtn"  type="primary">添加</el-button> -->
      </div>
      <div class="con">
        <div class="con-row flex flexac pl upload-btn-list">
          <el-button class="defaultbtn" type="primary" @click="handleFileupload"><i class="el-icon-upload" />文件上传</el-button>
          <el-button class="defaultbtn" type="primary" @click="handleRefresh"><i class="el-icon-refresh" :class="refresh?'goRefresh':''" />刷新</el-button>
        </div>
        <div class="uploadStep m-b-60 m-t-80">
          <el-steps :active="active" align-center finish-status="success">
            <el-step title="上传文件" description="文件上传已完成" />
            <el-step title="数据检查" description="数据检查已检查完毕" />
            <el-step v-if="errorStatus" title="上传结果" description="上传成功" />
            <el-step v-else title="上传结果" status="error" description="上传错误，请查看错误信息" />
          </el-steps>
        </div>
        <div class="sampleDownload">
          <div class="titleText">电梯档案数据文件名应为: </div>
          <div class="con flex flexac">电梯档案信息表 ( 格式分为 .xls / .xlsx, 选择下载 )
            <el-button class="defaultbtn samplexls m-l-20" type="primary" @click="handleDownloadXls">
              <span class="iconfont icon-xiazai" />模板下载(.xls格式)
            </el-button>
            <el-button class="defaultbtn samplexls m-l-10" type="primary" @click="handleDownloadXlsx">
              <span class="iconfont icon-xiazai" />模板下载(.xlsx格式)
            </el-button>
          </div>
        </div>
        <el-table
          id="dataList"
          ref="dataList"
          class="con-table "
          type="expand"
          :data="dataList.slice((paging.currentPage - 1) * paging.pageSize, paging.currentPage * paging.pageSize)"
          highlight-current-row
        >
          <!-- <el-table-column width="90" type="selection" label="全选" /> -->
          <el-table-column label="文件名" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="大小" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.size }}</span>
            </template>
          </el-table-column>
          <el-table-column label="文件上传时间" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.lastModifiedDate }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="name" align="center" label="导入结果">
            <template>
              <el-button class="defaultbtn" type="primary" plain @click="handleStatusLog">
                <i class="el-icon-edit" />查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-pagination class="paginationWrap flex " :current-page="paging.currentPage" :page-sizes="paging.pageSizeArr" :page-size="paging.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="paging.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> -->
      </div>
    </div>

    <el-dialog class="uploadFileDialog bgtransparent" :visible.sync="fileDialog.showDialog" width="40%" center>
      <uploadFile
        :file-type="fileDialog.type"
        :active="active"
        :upload-tip="uploadTip"
        @error-msg="handelErrorMsg"
        @update="handleUpdateExcel"
        @handleCloseDialog="handleCloseDialog"
      />
    </el-dialog>

    <el-dialog class="statusLogDialog bgtransparent" :visible.sync="statusDialog.showDialog" width="40%" center>
      <statusDialog :file-type="statusDialog.type" :status-data="statusDialog.statusData" @handleCloseDialog="handleCloseDialog" />
    </el-dialog>

  </div>
</template>

<script>

import { showNotice, formatDateTime } from '@/utils/toolclass'
import uploadFile from '@/components/uploadFile'
import statusDialog from '@/components/statusLog'

export default {
  components: {
    uploadFile,
    statusDialog
  },
  props: {},
  data() {
    return {
      active: 0,
      type: 1,
      errorStatus: true,
      uploadTip: '只支持上传.xls / .xlsx格式文件',
      fileDialog: {
        showDialog: false,
        type: null
      },
      statusDialog: {
        showDialog: false,
        statusData: [],
        type: null
      },
      file: {},
      paging: {
        currentPage: 1,
        pageSize: 100,
        pageSizeArr: [10, 20, 50, 100],
        total: 400
      },
      dataList: [],
      refresh: false,
      status: 0

    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.$storage.set('upUrl', JSON.stringify({ 'path': '/dossierImport' }))
  },
  methods: {
    getInit() {
      this.active = 3
      this.errorStatus = false
      this.dataList.push({
        name: this.file.name,
        size: (this.file.size / 1024).toFixed(2) + 'K',
        lastModifiedDate: formatDateTime(this.file.lastModifiedDate).ymdhm
      })
    },
    handelErrorMsg(res) {
      if (res.code === '200007') {
        this.active = 4
        this.errorStatus = false
        this.getInit()
        // console.log(res)
        // console.log(res.msg.split('\n'))
        this.a = res.msg.split('\n')
        this.a.forEach((val, i) => {
          var newArr = val.split('！')
          // console.log(newArr[0])
          // console.log(newArr[1])
          const items = {
            id: i + 1,
            info: newArr[0],
            name: newArr[1]
          }
          this.statusDialog.statusData.push(items)
        })
        // this.a = res.msg.split('“')[0] + res.msg.split('”')[1]
        // this.d = res.msg.split('“')[1].split(',').slice(0, length - 1)
        // this.e = res.msg.split('“')[1].split(',')[2].split('”')[0]

        // this.d.push(this.e)
        // this.d.forEach((val, i) => {
        //   this.params = {
        //     id: i + 1,
        //     info: val,
        //     name: this.a
        //   }
        //   this.statusDialog.statusData.push(this.params)
        // })
      } else if (res.code === '000000') {
        this.active = 3
        this.errorStatus = true
        this.dataList = []
      } else {
        this.active = 4
        this.errorStatus = false
      }
    },
    handleUpdateExcel(res) {
      this.file = res
    },
    handleStatusLog() {
      // console.log('查看导入状态')

      this.statusDialog.type = this.type
      this.statusDialog.showDialog = true
    },
    handleFileupload() {
      // console.log(this.status)
      if (this.status === 0) {
        showNotice('warning', '提示', '请先下载模版')
        return
      }
      this.dataList = []
      this.fileDialog.type = this.type
      this.fileDialog.showDialog = true
    },
    handleDownloadXls() {
      this.status = 1
      const url = '/maintenance/电梯档案.xls'
      window.location.href = url
    },
    handleDownloadXlsx() {
      this.status = 1
      const url = '/maintenance/电梯档案.xlsx'
      window.location.href = url
    },
    handleRefresh() {
      this.refresh = true
      // this.getResourcesList()
      setTimeout(() => {
        this.refresh = false
      }, 1200)
    },
    handleCloseDialog() {
      this.fileDialog.showDialog = false
      this.statusDialog.showDialog = false
    },
    handleSizeChange(val) {
      this.paging.pageSize = val
      this.getResourcesList()
    },
    handleCurrentChange(val) {
      this.paging.currentPage = val
      this.getResourcesList()
    }
  }
}
</script>
<style lang="scss">
@import "@/styles/public.scss";
.sampleDownload {
  padding: 20px 30px;
  .titleText {
    color: rgb(48, 65, 86);
    font-weight: 700;
  }
  .con {
    font-size: 14px;
    color: rgb(48, 65, 86);
  }
  .samplexlsx,
  .samplexls {
    border-radius: 3px;
    font-size: 12px;
  }
}

.errorImg {
  display: inline-block;
  width: 60px;
  height: 60px;
}
.steptip1 {
  // padding: 0 15px;
}

.steptip1 .step {
  width: 28%;
  height: 80px;
  float: left;
  // margin-left: 4%;
  text-align: center;
  font-size: 12px;
  background-color: #fff;
  position: relative;
}

.steptip1 .step1 {
  margin-left: 0px !important;
}

.steptip1 .step .num {
  width: 27px;
  height: 27px;
  position: absolute;
  margin: auto;
  top: 18px;
  left: 0;
  right: 0;
  z-index: 2;
  background-color: #fff;

  span {
    width: 93%;
    height: 93%;
    display: inline-block;
    background-color: #ccc;
    border-radius: 50%;
    color: #fff;
    text-align: center;
  }
}

.steptip1 .step .text {
  position: absolute;
  top: 55px;
  width: 100%;
  text-align: center;
}

.steptip1 .step .line {
  width: 50%;
  height: 0px;
}

.steptip1 .step .left {
  position: absolute;
  left: 0;
  top: 29.5px;

  margin: auto;
}

.steptip1 .step .right {
  position: absolute;
  right: 0;
  top: 29.5px;
}
.step1 .left,
.step3 .right {
  display: none;
}
.steptip .line {
  border-top: 2px solid #ccc;
}
.steptip1 {
  margin-bottom: 30px;
  margin-top: 30px;
}
.upload-btn-list {
  padding: 30px 0 19px 35px;
  border-bottom: 1px solid #ccc;
}
.setp1-tip {
  font-size: 16px;
}
.setp1-result {
  font-size: 13px;
  padding: 10px 0;
}
</style>
